<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>WebShh 0.0.3</title>

<link rel="stylesheet"
	href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css"
	type="text/css" media="all" />
<link rel="stylesheet"
	href="webshell.css"
	type="text/css" media="all" />
	
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script>

<script src="webshell.js" type="text/javascript"></script> 
			
<script type="text/javascript">

	
	
	$(function() {
		var tab_counter = 4;
		
		$("#tabs").tabs();

		$('#add_tab')
			.button()
			.click(function() {
				addTab();
			});
		
		function addTab() {
			var tab_title = 'Tab '+tab_counter;
			$("#tabs").tabs('add', '#tabs-'+tab_counter, tab_title);
			tab_counter++;
		}
	});
	
	</script>

<script type="text/javascript">
var t;
var is_scroll=false;
var curr_overlay=0;
var sel_overlay=1;
var cy=0;
window.onload=function() {
	t=webshell.Terminal("term",80,24,handler);
	document.onkeypress=t.keypress;
	document.onkeydown=t.keydown; 
	setTimeout(function(){window.scrollTo(0, 1);}, 100);
	//alert('Connecting',0,false);
};
window.onselectstart=function() {return false;};
function handler(msg,value) {
	switch(msg) {
	case 'conn':
		//alert('Tap for keyboard',800,false);
		break;
	case 'disc':
		//alert('Disconnected',0,true);
		break;
	case 'curs':
		cy=value;
		scroll(cy);
		break;
	}
}
function scroll() {
	var div=document.getElementById("term");
	var sp=0;
	if((curr_overlay>0) && (cy>4))
		sp=((4-cy)*11)+"px";
	if (!is_scroll)
		sp=0;
	div.style.top=sp;
}
</script>

</head>
<body>

<button id="add_tab">Add Tab</button>

<div id="tabs">
<ul>
	<li><a href="#tabs-1">Nunc tincidunt</a></li>
	<li><a href="#tabs-2">Proin dolor</a></li>
	<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a,
risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam
elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris
dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed
magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor
vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel
pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum.
Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<div id="term"></div>
</div>
<div id="tabs-3">
</div>
</div>
</body>
</html>
